<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <!-- 提取出一个单个的组件，有样式的问题 -->
      <el-header>
        <div>
          <img src="http://www.mobiletrain.org/images/index/new_logo.png" alt="" />
          <h3>电影后台管理</h3>
        </div>
        <div>
          <span>{{ $store.getters.nickname }}</span>
          <span @click="logout">退出系统</span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 菜单 -->
          <!-- router属性设置为true，下面的 menu-item中的index当作路由的path路由所用 -->
          <el-menu :router="true" :default-active="activeMenuIndex">
            <template v-for="(item, index) in menuConfig">
              <template v-if="!item.children">
                <!-- vue2循环中的key一定要写在有效的元素中 -->
                <el-menu-item v-if="isShowMenu(item.path, item.title)" :key="item.path" :index="item.path">
                  <i :class="item.icon"></i>
                  <span slot="title">{{ item.title }}</span>
                </el-menu-item>
              </template>
              <template v-else>
                <el-submenu v-if="isShowMenu(item.path, item.title)" :key="item.path" :index="item.path">
                  <template slot="title">
                    <i :class="item.icon"></i>
                    {{ item.title }}
                  </template>
                  <template v-for="val in item.children">
                    <el-menu-item v-if="isShowMenu(val.path, val.title)" :key="val.path" :index="val.path">{{
                      val.title
                    }}</el-menu-item>
                  </template>
                </el-submenu>
              </template>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 子路由的页面显示节点 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>

    <!-- 弹框 -->
    <!-- .sync它是一个语法糖 用于简化父子组件通信的修饰符 props(visible) => emit(update:visible) -->
    <el-dialog title="用户退出提示" :visible.sync="dialogVisible" width="30%">
      <span>您真的要退出本次登录吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">再考虑一下</el-button>
        <el-button type="primary" @click="confirmLogout">残忍退出</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { delStoreUser } from '@/utils/store'
import menuConfig from '@/config/site/menu'
export default {
  computed: {
    activeMenuIndex() {
      return this.$route.path
    },
    menuConfig() {
      return menuConfig
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  mounted() {
    // console.log(this.menuConfig)
    // 通过this来调用实例中的方法，而$ds它不是vue实例中原有的方法，所以需要手动的去添加一个
    // 因为我想着全局可用，所以可以在全局添加
    // 需要原生dom支持的 ==》 vue中也是需要的dom操作，dom操作还是很重要的
    // this.$ds()
  },
  methods: {
    isShowMenu(path, name) {
      // console.log(this.$store.state.user.nodes)
      return this.$store.state.user.nodes.some(item => item.name == name || item.route == path)
    },
    // 确认框中点击了确认处理方法
    confirmLogout() {
      // 清空vuex中的数据
      this.$store.commit('user/setUser', { uid: 0, token: '', nickname: '' })
      // 删除持久化中的数据
      delStoreUser()
      // 进行路由的跳转，使用替换的方式，不要用push，因为push能回退
      this.$router.replace('/login')
      // 关闭弹出框
      this.dialogVisible = false
    },
    // 点击了退出登录的按钮事件
    logout() {
      // 关闭弹出框
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  width: 100%;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  > div:nth-of-type(1) {
    display: flex;
    img {
      height: 45px;
    }
  }
  > div:nth-of-type(2) {
    cursor: pointer;
    > span:nth-of-type(1) {
      margin-right: 20px;
    }
    > span:nth-of-type(2) {
      font-weight: bold;
    }
  }
}

.el-aside {
  background-color: #d3dce6;
}

.el-main {
  background-color: #e9eef3;
}
</style>
